<?php include('scripts.php'); ?>

<style type="text/css">
.style3 {
    color: #FFFFFF;
}

fieldset {
    background-color: #F2EFE9;
    border: 0 solid #BFBAB0;
    clear: both;
    float: left;
    margin: 0 0 1.5em;
    padding: 0;
    width: 100%;
}

legend {
    color: #996600;
    font-family: Verdana,Helvetice,Arial,sans-serif;
    font-size: 100%;
    font-weight: bold;
    padding: 0.3em 0;
    text-align: center;
    text-decoration: underline;
    width: 100%;
}
</style>
<script>
$(function() {
    jQuery.validator.addMethod("noSpace", function(value, element) {
            return value.indexOf(" ") < 0 && value != "";
        }, "No space please and don't leave it empty");

    $("#registerForm").validate({
        messages : {
            confirmPassword: {
                equalTo: "<?php echo __('Please enter the same password as above') ?>"
            },
            userName: {
                remote: "<?php echo __('User Name already in use') ?>."
            },
            /*captcha: "<br><?php echo __('Correct captcha is required') ?>.",*/
            nickName: {
                remote: "<?php echo __('Alias already in use') ?>."
            },
            transactionPassword: {
                remote: "Security Password is not valid."
            }
        },
        rules : {
            "transactionPassword" : {
                required : true,
                remote: "/member/verifyTransactionPassword"
            }
        },
        submitHandler: function(form) {
            if ($("input[name=packageId]").is(':checked') == false) {
                alert("<?php echo __('Please choice a package for new shareholder registration.') ?>.");
                return false;
            }
            var answer = confirm("Are you sure want to register this member?")
            if (answer){
                waiting();
                form.submit();
            }
        },
        success: function(label) {
            //label.addClass("valid").text("Valid captcha!")
        }
    });

    $("input[name=packageId]").click(function(event){
        $("#totalPay").val($(this).attr("ref"));
    });
});
</script>

<div style="padding: 10px; top: 30px; width: 98%">
    <div class="portlet">
        <div class="portlet-header"><?php echo __('Package Upgrade') ?></div>
        <div class="portlet-content">
            <form action="/member/doUpgradePackage" id="registerForm" method="post">
            <input type="hidden" name="distId" value="<?php echo $distDB->getDistributorId()?>">

            <table cellpadding="0" cellspacing="5" border="0" width="100%">
                <tr>
                    <td colspan=2 align='center'>
                    <?php if ($sf_flash->has('successMsg')): ?>
                        <div class="ui-widget">
                            <div style="margin-top: 20px; padding: 0 .7em;" class="ui-state-highlight ui-corner-all">
                                <p><span style="float: left; margin-right: .3em;" class="ui-icon ui-icon-info"></span>
                                <strong><?php echo $sf_flash->get('successMsg') ?></strong></p>
                            </div>
                        </div>
                    <?php endif; ?>
                    </td>
                </tr>
                <tr>
                    <td>
                        <style type="text/css">
                            .pbl_table {
                                border-collapse: collapse;
                                float: left;
                                margin: 5px 0 3px;
                                width: 100%;
                            }

                            .pbl_table tr.pbl_header {
                                background-color: #434343;
                                color: #FFFFFF;
                                font-weight: bold;
                                text-align: center;
                            }

                            .pbl_table tr.pbl_header td {
                                color: #FFFFFF;
                            }
                            .pbl_table tr.row0 {
                                background-color: #DCDCDC;
                            }
                                                        .pbl_table tr.row1 {
                                background-color: #FFFFFF;
                            }
                        </style>

                        <fieldset>
                            <legend>Member Package Selection</legend>

                            <table width="90%" cellspacing="1" cellpadding="1" align="center">
                                <tbody><tr>
                                    <th width="13%" bgcolor="#000000" align="center"><span class="style3">Join Package</span></th>
                                    <th width="13%" bgcolor="#000000" align="center"><span class="style3">Membership</span></th>
                                    <th width="17%" bgcolor="#FF9900" align="center">Price (EPoint)</th>
                                </tr>

                                <?php
                                if (count($normalPackageDBs) > 0) {
                                    foreach ($normalPackageDBs as $packageDB) {

                                ?>
                                <tr>
                                    <td width="13%" bgcolor="#6699CC" align="center">
                                    <?php
                                        if ($pointAvailable >= $packageDB->getPrice() && $distPackage->getPrice() < $packageDB->getPrice()) {
                                            echo "<input type='radio' value='" . $packageDB->getPackageId(). "' name='packageId' ref='".number_format($packageDB->getPrice(), 2)."'>";
                                        } else {
                                            echo "";
                                        }
                                    ?>
                                    </td>
                                    <td width="13%" bgcolor="#6699CC" align="center"><?php echo $packageDB->getPackageName(); ?></td>
                                    <td width="17%" bgcolor="#CCCCCC" align="center"><?php echo number_format($packageDB->getPrice(), 2); ?></td>
                                </tr>
                                <?php }
                                }
                                ?>
                                </tbody>
                            </table>
                        </fieldset>

                        <fieldset>
                            <legend>VIP Package Selection</legend>

                            <table width="90%" cellspacing="1" cellpadding="1" align="center">
                                <tbody><tr>
                                    <th width="13%" bgcolor="#000000" align="center"><span class="style3">Join Package</span></th>
                                    <th width="13%" bgcolor="#000000" align="center"><span class="style3">Membership</span></th>
                                    <th width="17%" bgcolor="#FF9900" align="center">Price (EPoint)</th>
                                </tr>

                                <?php
                                if (count($vipPackageDBs) > 0) {
                                    foreach ($vipPackageDBs as $packageDB) {

                                ?>
                                <tr>
                                    <td width="13%" bgcolor="#6699CC" align="center">
                                    <?php
                                        if ($pointAvailable >= $packageDB->getPrice() && $distPackage->getPrice() < $packageDB->getPrice()) {
                                            echo "<input type='radio' value='" . $packageDB->getPackageId(). "' name='packageId' ref='".number_format($packageDB->getPrice(), 2)."'>";
                                        } else {
                                            echo "";
                                        }
                                    ?>
                                    </td>
                                    <td width="13%" bgcolor="#6699CC" align="center"><?php echo $packageDB->getPackageName(); ?></td>
                                    <td width="17%" bgcolor="#CCCCCC" align="center"><?php echo number_format($packageDB->getPrice(), 2); ?></td>
                                </tr>
                                <?php }
                                }
                                ?>
                                </tbody>
                            </table>
                        </fieldset>


                        <div class="clear"></div>

                        <fieldset>
                            <legend>Payment Information</legend>

                            <table width="90%" cellspacing="1" cellpadding="1" align="center">
                                <tr>
                                    <td class="login_t74" width="300px">
                                        <span><strong><?php echo __('User Name') ?></strong></span>
                                    </td>
                                    <td>
                                        <input name="userName" type="text" id="userName" value="<?php echo $distDB->getDistributorCode() ?>" readonly="readonly"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="login_t74" width="300px">
                                        <span><strong><?php echo __('Full Name') ?></strong></span>
                                    </td>
                                    <td>
                                        <input name="fullname" type="text" id="fullname"
                                               value="<?php echo $distDB->getFullName() ?>" readonly="readonly"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="login_t74" width="300px">
                                        <span><strong><?php echo __('Total Pay') ?></strong></span>
                                    </td>
                                    <td>
                                        <input name="totalPay" type="text" id="totalPay" value="0" readonly="readonly"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="login_t74" width="300px">
                                        <span><strong><?php echo __('e-Point Available') ?></strong></span>
                                    </td>
                                    <td>
                                        <input name="epointAvailable" type="text" id="epointAvailable" value="<?php echo number_format($pointAvailable, 2) ?>" readonly="readonly"/>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="login_t74" width="300px">
                                        <span><strong><?php echo __('Security Password') ?></strong></span>
                                    </td>
                                    <td>
                                        <input type="password" class="inputbox" id="transactionPassword" name="transactionPassword" value="">
                                    </td>
                                </tr>
                            </table>
                        </fieldset>
                    </td>
                </tr>
                <tr>
                    <td><hr></td>
                </tr>
                <tr>
                    <td>
                        <button id="btnUpdate"><?php echo __('Submit') ?></button>
                    </td>
                </tr>
            </table>
            </form>
        </div>
    </div>


<script type="text/javascript" language="javascript">
    var datagrid = null;
    $(function() {
        datagrid = $("#datagrid").r9jasonDataTable({
            // online1DataTable extra params
            "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
            "extraParam" : function(aoData) { // pass extra params to server
            },
            "reassignEvent" : function() { // extra function for reassignEvent when JSON is back from server
                reassignDatagridEventAttr();
            },

            // datatables params
            "bLengthChange": true,
            "bFilter": false,
            "bProcessing": true,
            "bServerSide": true,
            "bAutoWidth": false,
            "sAjaxSource": "/finance/packageUpgradeList",
            "sPaginationType": "full_numbers",
            "aaSorting": [
                [1,'desc']
            ],
            "aoColumns": [
                { "sName" : "dist_id", "bVisible" : false,  "bSortable": true},
                { "sName" : "created_on",  "bSortable": true},
                { "sName" : "transaction_code",  "bSortable": true},
                { "sName" : "amount",  "bSortable": true},
                { "sName" : "status_code",  "bSortable": true},
                { "sName" : "remarks",  "bSortable": true}
            ]
        });
    }); // end function

    function reassignDatagridEventAttr() {
    }
</script>

<div class="portlet">
    <div class="portlet-header"><?php echo __('Package Upgrade History') ?></div>
    <div class="portlet-content">

        <table class="display" id="datagrid" border="0" width="100%">
            <thead>
            <tr>
                <th></th>
                <th><?php echo __('Date') ?></th>
                <th><?php echo __('Transaction Code') ?></th>
                <th><?php echo __('Amount') ?></th>
                <th><?php echo __('Status') ?></th>
                <th><?php echo __('Remarks') ?></th>
            </tr>
            </thead>
        </table>
    </div>
</div>

</div>